<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>

    <!-- 表格 -->
    <el-table :data="dataList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
      <el-table-column type="selection" width="55"/>
      <el-table-column label="序号" align="center" type="index" width="50"/>
      <el-table-column prop="action" align="center" label="审批类型">
        <template slot-scope="scope">
          {{ scope.row.moudle_name }}
        </template>
      </el-table-column>
      <el-table-column prop="action" align="center" label="标题">
        <template slot-scope="scope">
          {{ scope.row.proposal_title }}
        </template>
      </el-table-column>
      <el-table-column prop="module" align="center" label="发起人">
        <template slot-scope="scope">
          {{ scope.row.user_name }}
        </template>
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="发起时间"/>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <p v-if="scope.row.audit_status == 0">待审核</p>
          <p v-if="scope.row.audit_status == 1">审核通过</p>
          <p v-if="scope.row.audit_status == 2">审核不通过</p>
          <p v-if="scope.row.audit_status == 3">审核撤回</p>
          <!-- <p v-if="scope.row.audit_status == 4">放弃</p> -->
          <p v-if="scope.row.audit_status == 5">审核中</p>
          <p v-if="scope.row.audit_status == 6">审核结束</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="openForm(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
    <!-- 审核模态框 -->
    <section>
      <el-dialog title="审核详情" :visible.sync="isShow.add" width="50%">
        <el-tabs v-model="activeName">
          <el-tab-pane label="审批信息" name="first">
            <div class="block">
              <el-steps direction="vertical" :active="1">
                <el-step :title="dataInfo.create_username" status="success">
                  <template slot="description" >
                    <div class="content-box">
                      <p>发起审批</p>
                      <p>{{dataInfo.create_time}}</p>
                    </div>
                  </template>
                </el-step>
                <el-step :status="item.approve_status==1?'success':'error'" v-for="(item, index) in dataInfo.approve_record" :key="index">
                  <template slot="title" >
                    <p>{{item.user_name}}</p>
                  </template>
                  <template slot="description" >
                     <p class="content-box">
                      <span :class="item.approve_status == 1?'text-color1':'text-color2'" v-if="item.approve_status == 1">审批通过</span>
                      <span :class="item.approve_status == 1?'text-color1':'text-color2'" v-if="item.approve_status == 2">审批不通过</span>
                      <span :class="item.approve_status == 1?'text-color1':'text-color2'" >{{item.create_time}}</span>
                    </p>
                    <p>{{item.approve_msg}}</p>
                  </template>
                </el-step>
              </el-steps>
              <div class="approve-box">
                <p v-if="dataInfo.audit_status == 0">待审核</p>
                <p v-if="dataInfo.audit_status == 1">审核通过</p>
                <p v-if="dataInfo.audit_status == 2">审核不通过</p>
                <p v-if="dataInfo.audit_status == 3">审核撤回</p>
                <!-- <p v-if="dataInfo.audit_status == 4">放弃</p> -->
                <p v-if="dataInfo.audit_status == 5">审核中</p>
                <p v-if="dataInfo.audit_status == 6">审核结束</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="详情" v-if="dataInfo.moule_id == 1" name="second">
            <div class="details-box">
              <el-form :model="dataInfo" ref="dataInfo" label-width="80px">
                <el-form-item label="主题:">
                  <p>{{dataInfo.proposal_title}}</p>
                </el-form-item>
                <el-form-item label="封面:">
                  <img :src="dataInfo.file_path" width="300" alt="">
                </el-form-item>
                <el-form-item label="现状描述:">
                  <div v-html="dataInfo.actuality_description"></div>
                </el-form-item>
                <el-form-item label="改善方案:">
                  <div v-html="dataInfo.improvement_scheme"></div>
                </el-form-item>
                <el-form-item label="效益预测:">
                  <p>{{dataInfo.benefit_calculation}}</p>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="dataInfo.moule_id == 2" label="详情" name="second">
            <div class="details-box">
              <el-form :model="dataInfo" ref="dataInfo" label-width="80px">
                <el-form-item label="主题:">
                  <p>{{dataInfo.proposal_title}}</p>
                </el-form-item>
                <el-form-item label="出生证:">
                  <img :src="dataInfo.file_path" width="300" alt="">
                </el-form-item>
                <el-form-item label="生育证:">
                  <div v-html="dataInfo.improvement_scheme"></div>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="dataInfo.moule_id == 3" label="详情" name="second">
            <div class="details-box">
              <el-form :model="dataInfo" ref="dataInfo" label-width="100px">
                <el-form-item label="主题:">
                  <p>{{dataInfo.proposal_title}}</p>
                </el-form-item>
                <el-form-item label="结婚证:">
                  <img :src="dataInfo.file_path" width="300" alt="">
                </el-form-item>
                <el-form-item label="身份证正面:">
                  <div v-html="dataInfo.improvement_scheme"></div>
                </el-form-item>
                <el-form-item label="身份证反面:">
                  <div v-html="dataInfo.benefit_calculation"></div>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </section>
  </div>
</template>
<script>
import { searchTool } from '@/utils'
import { MyApproveRecord_list, findById_approveRecord, approve_approveRecord } from "@/api/approveRecord";
import SoPagination from '@/components/SoPagination'
import SoToolBar from '@/components/SoToolBar'
import { toolData } from './pendingApprova'
import config from '@/utils/conf'

export default {
  name: "pendingApprova",
  components: { SoPagination, SoToolBar },
  data() {
    return {
      toolData: toolData, //搜索工具栏初始化
      loading: false,
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
      conf: config,
      isShow: { add: false },
      editDeptForm: {},
      currentPage: 1,
      dataList: [],
      dataInfo:{},
      userId:"",
      activeName: 'first'
    };
  },
  methods: {
    search() {//搜索
      let keyWords = {key: 'searchDate', names: ['create_starttime', 'create_endtime']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
    openForm(item){
      this.activeName = 'first'
      this.isShow.add = true
      this.userId = item.id
      this.approveRecord(item.id)
      // this.my_approveRecord(item.id)
    },
    onCompile(e){
      this.$prompt('审批意见:', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        let dataList = {
          id:this.userId,
          approve_msg: value,
          approve_status: e
        }
        this.my_approveRecord(dataList)
        this.isShow.add = false
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '取消输入'
        // });       
      });
    },
    async approveRecord(id){
      this.loading = true;
      const query = {id:id, company_id: localStorage.getItem("companyId") - 0}
      const { data } = await findById_approveRecord(query);
      this.loading = false;
      if (data.status == 100) {
        this.dataInfo = data.data;
      }
    },
    async my_approveRecord(dataList){
      try {
        this.loading = true;
        const query = {...dataList, company_id: localStorage.getItem("companyId") - 0}
        const { data } = await approve_approveRecord(query);
        if (data.status == 100) {
          this.$message({
            type: 'success',
            message: '提交成功'
          });
          this.loading = false;
          this.initList();
        }
      } catch (error) {
         this.loading = false;
      }

    },
    async initList() {//获取数据
      this.loading = true;
      const query = {...this.listQuery, company_id: localStorage.getItem("companyId") - 0}
      const { data } = await MyApproveRecord_list(query);
      this.loading = false;
      if (data.status == 100) {
        this.dataList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$color: #606266;
span {
  font-size: 13px;
  color: $color;
}
.block {
  padding: 10px 20px;
  height: 300px;
  display: flex;
  justify-content: space-between;
}
.approve-box {
  width: 100px;
  height: 100px;
  margin: 0 50px 0;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    transform: rotate(45deg)
  }
}
.content-box {
  display: flex;
  justify-content: space-between;
  width: 200px;
}
.text-color1{
  color: #67c23a;
}
.text-color2{
  color: #f56c6c;
}
</style>
